/**
 * @Title: evaluate-object.js
 * @Description: evaluate-object
 * @author: Fanchao
 * @date: 2021/2/3 11:33 下午
 * @version V1.0
 */
import React, { useEffect, useState } from 'react';
import styles from '@/pages/teaching-quality/class-evaluations/index.less';
import { Button, Cascader, Input, Select, Table } from 'antd';
import { connect } from 'umi';

const EvaluateObject = ({ classEvaluations: { schoolYearListOption, treeData, dataSource }, dispatch, loading }) => {
    const [departmentId, setDepartmentId] = useState([]);
    const [schoolYear, setSchoolYear] = useState();
    const [semester, setSemester] = useState();
    const [teacherUserName, setTeacherUserName] = useState('');

    useEffect(() => {
        dispatch({
            type: 'classEvaluations/getDataSource',
            payload: {
                departmentId: departmentId.pop(),
                schoolYear,
                semester,
                teacherUserName,
            },
        });
        dispatch({
            type: 'classEvaluations/getSchoolYearListOption',
            payload: {},
        });
    }, []);
    const columns = [
        {
            title: '教员姓名',
            align: 'left',
            render: (item) => item.evaluateObjectModel.teacherRealName,
        },

        {
            title: '授课对象',
            align: 'left',
            render: (item) => item.evaluateObjectModel.studentType,
        },
        {
            title: '课程名称',
            align: 'left',
            render: (item) => item.evaluateObjectModel.course,
        },
        {
            title: '学年',
            dataIndex: 'schoolYear',
            align: 'left',
        },
        {
            title: '学期',
            dataIndex: 'semester',
            align: 'left',
        },
        {
            title: '学员打分',
            dataIndex: 'studentScore',
            align: 'left',
        },
        {
            title: '专家打分',
            dataIndex: 'expertScore',
            align: 'left',
        },
        {
            title: '总分',
            dataIndex: 'evaluateScore',
            align: 'left',
        },
        {
            title: '评价结果',
            dataIndex: 'evaluateResult',
            align: 'left',
        },
        {
            title: '单位排名',
            dataIndex: 'departmentRank',
            align: 'left',
        },
        {
            title: '备注',
            dataIndex: 'comment',
            align: 'left',
        },
        // {
        //     title: '操作',
        //     align: 'left',
        //     render: (item) => {
        //         return (
        //             <div>
        //                 <Link to={`class-evaluations/${item.teacherUserId}`}>查看评价</Link>
        //             </div>
        //         );
        //     },
        // },
    ];

    return (
        <div>
            <div className={styles.filterContainer}>
                <Input
                    className={styles.formWrapper}
                    value={teacherUserName}
                    onChange={(e) => setTeacherUserName(e.target.value)}
                    placeholder="教员姓名"
                />
                <Select
                    placeholder="学期"
                    value={semester}
                    onChange={(value) => setSemester(value)}
                    className={styles.formWrapper}
                >
                    <Option value="第一学期">第一学期</Option>
                    <Option value="第二学期">第二学期</Option>
                </Select>
                <Select
                    placeholder="学年"
                    value={schoolYear}
                    onChange={(value) => setSchoolYear(value)}
                    className={styles.formWrapper}
                >
                    {
                        schoolYearListOption.map(item => {
                            return <Option key={item.id} value={item.schoolYear}>{item.schoolYear}</Option>;
                        })
                    }
                </Select>
                <Cascader
                    placeholder="院系"
                    className={styles.formWrapper}
                    changeOnSelect
                    value={departmentId}
                    options={treeData}
                    onChange={(value) => setDepartmentId(value)}
                />
                <Button
                    className={styles.marginRight}
                    type="primary"
                    onClick={() => {
                        dispatch({
                            type: 'classEvaluations/getDataSource',
                            payload: {
                                departmentId: departmentId[departmentId.length - 1],
                                schoolYear,
                                semester,
                                teacherUserName,
                            },
                        });
                    }}
                >
                    查询
                </Button>
                <Button
                    onClick={() => {
                        dispatch({
                            type: 'classEvaluations/getDataSource',
                            payload: {
                                departmentId: '',
                                schoolYear: '',
                                semester: '',
                                teacherUserName: '',
                            },
                        });
                        setDepartmentId([]);
                        setSchoolYear();
                        setSemester();
                        setTeacherUserName('');
                    }}
                >
                    重置
                </Button>
            </div>
            <div className={styles.tableContainer}>
                <Table
                    bordered={false} // 是否有边框
                    rowKey={(item) => item.evaluateObjectModel.evaluateObjectId} // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={dataSource}
                    pagination={false}
                />
            </div>
        </div>
    );
};


export default connect(({ classEvaluations, dispatch, loading }) => ({
    classEvaluations,
    dispatch,
    loading: loading.effects['classEvaluations/getDataSource'],
}))(EvaluateObject);
